<template>
    <div>
        <el-card>
        <div class="echart" id="mychart" :style="myChartStyle"></div>
    </el-card>
</div>
</template>

<script>
import * as echarts from 'echarts';
import { getAnalyze } from '@/api/system/analyze';
export default {
    data() {
        return {
            // 每日用电情况表格数据
            list:[],
            dayElecInfoList: [],
            dayElec:[],
            myChart: {},
            monthChart: {},
            xData: [], //横坐标
            yData: [], //电量数据
            preData:[],
            myChartStyle: {  width: "100%", height: "600px" } ,//图表样式
        }
    },
    mounted() {
        
        this.getList();
    },
    methods: {
        getList(){
            const userId = this.$route.params.userId;
            getAnalyze(userId).then(
                (response)=>{
                this.yData = response.real;
                this.preData = response.pred;
                this.initEcharts();
            }
        ).catch(err=>{
            this.preData= [20, 30, 40, 50, 40, 30, 20]
            this.yData = [1,2,3,4,5,6,7]    
            this.initEcharts();
        })
        
        },
    /*图表的初始化*/
    initEcharts() {
    //    const xData = this.xData;
    const xData =[];
    
    var now = new Date();
    var date = new Date(now.getTime() - 8 * 24 * 3600 * 1000);
    for(let i = 0;i<8;i++){
        date = new Date(date.getTime() + 1 * 24 * 3600 * 1000);
        var month = date.getMonth() + 1;
        var day = date.getDate();
        xData.push(month+'-'+day);
 
    }

      const yData = this.yData;
      const preData = this.preData;
      const option = {
        title: {
      text: 'LSTM预测',

      left: 'center'
      },
      legend: {
        orient: 'vertical',
        x:'right',      //可设定图例在左、右、居中
        y:'center',     //可设定图例在上、下、居中
        padding:[0,50,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
        data: ['实际', '预测']
  },
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            name:"实际",
            data: yData,
            type: "line" // 类型设置为折线图
          },
          {
            name: '预测',
            type: 'line',
            stack: 'Total',
            data: preData,
            },
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
                
            },
        }

</script>
<style scoped>

</style>